let cartList = [
    {
        id: 11,
        name: 'OPPO Find X3',
        pic: 'https://img11.360buyimg.com/seckillcms/s280x280_jfs/t1/182306/24/14268/71347/60f150b9Ebb18e84c/b944d55c5d33bf82.jpg.webp',
        price: 3469,
        number: 1,
        ischecked: false
    },
    {
        id: 12,
        name: '卡西欧',
        pic: 'https://img30.360buyimg.com/seckillcms/s260x260_jfs/t1/209132/5/20262/96415/6254dbcdEc4b991fc/0f01c27574121b97.jpg.webp',
        price: 6653,
        number: 1,
        ischecked: true
    },
    {
        id: 13,
        name: '乐乐趣宝宝点读认知发声书',
        pic: 'https://img12.360buyimg.com/babel/s320x320_jfs/t1/177821/34/19497/131634/611b215bE14339945/9cc3628df54baf85.jpg!cc_320x320.webp',
        price: 122,
        number: 1,
        ischecked: false
    },
    {
        id: 14,
        name: '漫步者耳机',
        pic: 'https://img20.360buyimg.com/jdcms/s300x300_jfs/t1/221833/36/13333/106709/6232eca8Efae61da8/cb90fc4344c90a1b.jpg.webp',
        price: 2431,
        number: 1,
        ischecked: true
    }
]



const tbody = document.querySelector('tbody')
//设置渲染函数
function render() {
    const newArr = cartList.map((item, i) => {
        const { id, name, pic, price, number, ischecked } = item
        //

        return `
        <tr align="center">
        <td>
        ${ischecked ? '<input class="check" type="checkbox" checked data-id=' + i + '>' : '<input class="check" type="checkbox" data-id=' + i + '></input>'}
        </td>
        <td>${id}</td>
        <td>${name}</td>
        <td class="img">
          <img src="${pic}" style="width:70px;height:70px;" alt="">
        </td>
        <td class="price">${price.toFixed(2)}</td>
        <td class="num">
          <span class="reduce" data-id='${i}'>-</span>
          <input value="${number}" type="text">
          <span class="add" data-id='${i}'>+</span>
        </td>
        <td class="account">${(number * price).toFixed(2)}</td>
        <td>
          <button class="del" data-id='${i}'>删除</button>
        </td>
      </tr>
        `
    })
    tbody.innerHTML = newArr.join('')


    //总数量和单价
    const nums = cartList.filter(item => {
        if (item.ischecked === true) {
            return item
        }
    })
    const numSum = nums.reduce((prev, item) => {
        return +prev + Number(item.number)
    }, 0)
    document.querySelector('.totalNum').innerHTML = `商品总数：<i>${numSum}</i>`


    const prices = cartList.filter(item => {
        if (item.ischecked === true) {
            return item
        }
    })
    const priceSum = nums.reduce((prev, item) => {
        return +prev + item.number * item.price
    }, 0)
    document.querySelector('.totalPrice').innerHTML = `商品总价：<i>${priceSum.toFixed(2)}</i>`


}

render()


//全选按钮

const checkAll = document.querySelector('.checkbox')
checkAll.addEventListener('click', item => {
    if (checkAll.checked) {
        for (let i = 0; i < cartList.length; i++) {
            cartList[i].ischecked = true
            render()
        }
    } else {
        for (let i = 0; i < cartList.length; i++) {
            cartList[i].ischecked = false
            render()
        }
    }

})


//数量点击事件
tbody.addEventListener('click', e => {
    const { tagName } = e.target
    if (tagName === 'SPAN' && e.target.classList.contains('add')) {
        e.target.previousElementSibling.value++

        cartList[e.target.dataset.id].number = e.target.previousElementSibling.value

        e.target.parentElement.nextElementSibling.innerHTML = cartList[e.target.dataset.id].number * cartList[e.target.dataset.id].price
        render()

    }
    if (tagName === 'SPAN' && e.target.classList.contains('reduce') && e.target.nextElementSibling.value > 1) {
        e.target.nextElementSibling.value--

        cartList[e.target.dataset.id].number = e.target.nextElementSibling.value

        e.target.parentElement.nextElementSibling.innerHTML = cartList[e.target.dataset.id].number * cartList[e.target.dataset.id].price

        render()
    }

    //单选判断按钮
    const totalNums = document.querySelector('.totalNum')
    if (tagName === 'INPUT' && e.target.classList.contains('check')) {

        cartList[e.target.dataset.id].ischecked = !cartList[e.target.dataset.id].ischecked


        //单选与全选关联
        const chsum = cartList.every(item => item.ischecked)
        checkAll.checked = chsum; //全选框的值等于变量的值

        render()
    }

    //设置删除按钮
    if (tagName === 'BUTTON' && e.target.classList.contains('del')) {
        cartList[e.target.dataset.id].ischecked = false
        cartList.splice(e.target.dataset.id, 1)
        render()
        //删除所有的商品
        if (cartList.length === 0) {
            //没有数据时禁用全选按钮
            checkAll.checked = false
            checkAll.disabled = true
            tbody.innerHTML = `<tr>
<td colspan="8" align="center">暂无商品信息</td>
</tr>`
        }
    }

})


